<template>
	<view class="content">
		<div class='home'>
			<!-- 顶部 -->
			<div class='header'>
				<image class="img" src="https://image.meiye.art/pic_1629273346498hmgZovAoFxJp6BLNcP64s?imageMogr2/thumbnail/450x/interlace/1"></image>
			    <div class='seek'>
					<text class="iconfont icon-sousuo"></text>
					搜索想要的壁纸
				</div>
			</div>
			<!-- 下部分整体 -->
			<div class='hr'></div>
			<div class='main'>
				<!-- 轮播图 -->
				<div class='swiper'>
					<swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
						<swiper-item class="banner-item">
							<view class="swiper-item">
								<image class="img" src="https://image.meiye.art/pic_xgwymyFqbLWnq699yoLas?imageMogr2/thumbnail/450x/interlace/1"></image>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item">
								<image class="img" src="https://image.meiye.art/pic_hLzFjWzkRmEsKIFLrhEdd?imageMogr2/thumbnail/450x/interlace/1"></image>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item">
								<image class="img" src="https://image.meiye.art/pic_1628656248481?imageMogr2/thumbnail/450x/interlace/1"></image>
							</view>
						</swiper-item>
					</swiper>
				</div>
				<div class='hr'></div>
				<!-- 滚动区域1 -->
				<div class='slide'>
					<div class='title'>
						<div class='left'>
							<div class='stand'></div>
							<span class='text'>壁纸专辑</span>
						</div>
						<div class='right'>更多 +</div>
					</div>
					<scroll-view class="glide" scroll-x="true" enable-flex="true">
					    <view class="glide-item">
							<image class="img" src="https://image.meiye.art/pic_1628434545486?imageMogr2/thumbnail/450x/interlace/1"></image>
						</view>
						<view class="glide-item">
							<image class="img" src="https://image.meiye.art/pic_1628493211687?imageMogr2/thumbnail/450x/interlace/1"></image>
						</view>
						<view class="glide-item">
							<image class="img" src="https://image.meiye.art/pic_1632576596960nCL3Inc6W51uLOfRuoqxf?imageMogr2/thumbnail/450x/interlace/1"></image>
						</view>
						<view class="glide-item">
							<image class="img" src="https://image.meiye.art/Fu8wixsoTKoRFNgob0Y4NX7QLVlx?imageMogr2/thumbnail/450x/interlace/1"></image>
						</view>
					</scroll-view>
				</div>
				<!-- 滚动区域2 -->
				<div class='slide-one'>
					<div class='title'>
						<div class='left'>
							<div class='stand'></div>
							<span class='text'>精选壁纸</span>
						</div>
						<div class='right'>更多 +</div>
					</div>
					<scroll-view class="glide" scroll-x="true" enable-flex="true">
					    <view class="glide-item">
							<image class="img" src="https://image.meiye.art/pic_lRJ3PSB6NBinCfUVR5roc?imageMogr2/thumbnail/450x/interlace/1"></image>
						</view>
						<view class="glide-item">
							<image class="img" src="https://image.meiye.art/pic_1631510474351BgCShxWcakYi1uuy8zJcB?imageMogr2/thumbnail/450x/interlace/1"></image>
						</view>
						<view class="glide-item">
							<image class="img" src="https://image.meiye.art/pic_1631416513821LddvZFtkp7yNHC_2oNbjK?imageMogr2/thumbnail/450x/interlace/1"></image>
						</view>
						<view class="glide-item">
							<image class="img" src="https://image.meiye.art/pic_1632233597573nUpUwhFpdVDr5k4_GCP7Z?imageMogr2/thumbnail/450x/interlace/1"></image>
						</view>
					</scroll-view>
				</div>
				<!-- 滚动区域3 -->
				<div class='slide-tow'>
					<div class='title'>
						<div class='left'>
							<div class='stand'></div>
							<span class='text'>头像</span>
						</div>
						<div class='right'>更多 +</div>
					</div>
					<scroll-view class="glide" scroll-x="true" enable-flex="true">
					    <view class="glide-item">
							<image class="img" src="https://image.meiye.art/pic_1628831214986WVrj0X_74SgN8fHHF9udU?imageMogr2/thumbnail/450x/interlace/1"></image>
						</view>
						<view class="glide-item">
							<image class="img" src="https://image.meiye.art/pic_bLDrTTU_BOGLTxazYow4l?imageMogr2/thumbnail/450x/interlace/1"></image>
						</view>
						<view class="glide-item">
							<image class="img" src="https://image.meiye.art/pic_-ANNU4jR8bCjTcBWivvDt?imageMogr2/thumbnail/450x/interlace/1"></image>
						</view>
						<view class="glide-item">
							<image class="img" src="https://image.meiye.art/pic_1628402548544?imageMogr2/thumbnail/450x/interlace/1"></image>
						</view>
					</scroll-view>
				</div>
				<!-- 滚动区域4 -->
				<div class='slide-three'>
					<div class='title'>
						<div class='left'>
							<div class='stand'></div>
							<span class='text'>官方推荐</span>
						</div>
						<div class='right'>更多 +</div>
					</div>
					<scroll-view class="glide" scroll-x="true" enable-flex="true">
					    <view class="glide-item">
							<div class='word'>最新</div>
						</view>
						<view class="glide-item">
							<div class='word'>热门</div>
						</view>
						<view class="glide-item">
							<div class='word'>景深壁纸</div>
						</view>
						<view class="glide-item">
							<div class='word'>动漫次元</div>
						</view>
						<view class="glide-item">
							<div class='word'>概念色彩</div>
						</view>
					</scroll-view>
				</div>
				<!-- 图片展示区 -->
				<div class='Showcase'>
					<image class="img" src="https://image.meiye.art/FmOYGXJcx7knrfANMnDi7rUSTObO?imageMogr2/thumbnail/450x/interlace/1" mode=""></image>
					<image class="img" src="https://image.meiye.art/pic_1632282712448XNR6D770nF-A63Dcc9aWc?imageMogr2/thumbnail/450x/interlace/1" mode=""></image>
					<image class="img" src="https://image.meiye.art/FgbyQk43D8L__knHbUGYJHBMEA_C?imageMogr2/thumbnail/450x/interlace/1" mode=""></image>
					<image class="img" src="https://image.meiye.art/pic_Zs-4JFb31fqDkaoWem2z9?imageMogr2/thumbnail/450x/interlace/1" mode=""></image>
					<image class="img" src="https://image.meiye.art/pic_1628493294944?imageMogr2/thumbnail/450x/interlace/1" mode=""></image>
					<image class="img" src="https://image.meiye.art/pic_VPQ6LKvm3KOMxeWQRnokS?imageMogr2/thumbnail/450x/interlace/1" mode=""></image>
					<image class="img" src="https://image.meiye.art/pic_4BDgfZ_OGl4JLAq1qSuP-?imageMogr2/thumbnail/450x/interlace/1" mode=""></image>
					<image class="img" src="https://image.meiye.art/pic_RloUTwWmNc85DsVyObERK?imageMogr2/thumbnail/450x/interlace/1" mode=""></image>
					<image class="img" src="https://image.meiye.art/pic_F9HTo2naHCJwAGBiKJzEq?imageMogr2/thumbnail/450x/interlace/1" mode=""></image>
					<image class="img" src="https://image.meiye.art/pic_cLnXFju_aEtzRy9m-j4nO?imageMogr2/thumbnail/450x/interlace/1" mode=""></image>
					<image class="img" src="hhttps://image.meiye.art/pic_n5hK3laIz3Dul80ZIAUeN?imageMogr2/thumbnail/450x/interlace/1" mode=""></image>
					<image class="img" src="https://image.meiye.art/pic_CCax1e8whJyTCWwouPEVS?imageMogr2/thumbnail/450x/interlace/1" mode=""></image>
					<image class="img" src="https://image.meiye.art/pic_2xLiHAJYNjr8BiRrtPIR7?imageMogr2/thumbnail/450x/interlace/1" mode=""></image>
					<image class="img" src="https://image.meiye.art/pic_tno3h-JfnGPGFEcjTJu_x?imageMogr2/thumbnail/450x/interlace/1" mode=""></image>
					<image class="img" src="https://image.meiye.art/pic_6FEvYqYnqWLiCjedL3o7R?imageMogr2/thumbnail/450x/interlace/1" mode=""></image>
					<image class="img" src="https://image.meiye.art/pic_qO2E_NPpemtWT7BFv93UF?imageMogr2/thumbnail/450x/interlace/1" mode=""></image>
					<image class="img" src="https://image.meiye.art/pic_e_ni15eaqH9YNrPlcEbd7?imageMogr2/thumbnail/450x/interlace/1" mode=""></image>
					<image class="img" src="https://image.meiye.art/pic_1632282712448XNR6D770nF-A63Dcc9aWc?imageMogr2/thumbnail/450x/interlace/1" mode=""></image>
					
				</div>
			
			</div>
		</div>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				
			}
		},
	 //   async mounted() {
		// 	let result = await request({
		// 		url:'mock/list1'
		// 	})
		// 	console.log(返回的结果,'result')
		// },
		methods: {

		},

	}
</script>

<style lang="stylus">
	*
		margin: 0%;
		padding: 0;
	.content 
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: -webkit-linear-gradient(left,rgb(223,115,1),#f6a539);
	.home
		width: 100%;
		height: 100%;
		.header
			width: 100%
			height: 90rpx
			display: flex
			align-items: center
			padding: 0 40rpx
			box-sizing: border-box
			margin-top: 28px
			margin-bottom: 20px
			.img
				width: 65rpx
				height: 65rpx;
				border-radius: 50%
				margin-right: 10px
			.seek
				width: 430rpx
				height: 70rpx;
				background-color: #fff
				border-radius: 50px
				color: #a6a7a8;
				font-size: 15px
				.iconfont
					font-size: 20px
					line-height: 70rpx
					margin-left: 25rpx
					margin-right: 25rpx
					color: #a6a7a8;
		.hr
			width: 100%;
			height: 30px;
			background-color: black
			border-top-left-radius: 30px
			border-top-right-radius: 30px
		.main
			width: 100%
			height: 100%
			background-color: black
			.banner
				width: 330px
				height: 300rpx
				margin: 0 auto
				.swiper-item
					width: 100%
					height: 100%
					
					.img
						width: 100%
						height: 100%
						border-radius: 20px
						
			.slide
				width: 100%
				height: 200px
				.title
					width: 100%
					height: 45px
					display: flex
					justify-content: space-between
					align-items: center
					box-sizing: border-box
					padding: 0 20px
					.left
						width: 100px;
						height: 25px;
						display: flex;
						.stand
							width: 4px
							height: 22px
							background-color: #fff
							border-radius: 4px
							margin-right: 16rpx
						.text
							font-weight: 700
							color: #fff;
					.right
						width: 80px
						height: 25px
						box-sizing: border-box
						line-height: 25px
						font-size: 12px
						padding-left: 40px
						color: #83868c
				.glide
					width: 100%
					height: 135px
					display: flex
					flex-wrap: nowrap
					.glide-item
						flex-shrink: 0
						width: 310px
						height: 135px
						.img
							margin: 0 0px 20px 20px 
							width: 290px
							height: 135px
							border-radius: 20px
			.slide-one
				width: 100%
				height: 160px
				.title
					width: 100%
					height: 45px
					display: flex
					justify-content: space-between
					align-items: center
					box-sizing: border-box
					padding: 0 20px
					.left
						width: 100px;
						height: 25px;
						display: flex;
						.stand
							width: 4px
							height: 22px
							background-color: #fff
							border-radius: 4px
							margin-right: 16rpx
						.text
							font-weight: 700
							color: #fff;
					.right
						width: 80px
						height: 25px
						box-sizing: border-box
						line-height: 25px
						font-size: 12px
						padding-left: 40px
						color: #83868c
				.glide
					width: 100%
					height: 135px
					display: flex
					flex-wrap: nowrap
					.glide-item
						flex-shrink: 0
						width: 170px
						height: 100px
						.img
							margin: 0 0px 20px 20px 
							width: 150px
							height: 100px
							border-radius: 20px		
			.slide-tow
				width: 100%
				height: 200px
				.title
					width: 100%
					height: 45px
					display: flex
					justify-content: space-between
					align-items: center
					box-sizing: border-box
					padding: 0 20px
					.left
						width: 100px;
						height: 25px;
						display: flex;
						.stand
							width: 4px
							height: 22px
							background-color: #fff
							border-radius: 4px
							margin-right: 16rpx
						.text
							font-weight: 700
							color: #fff;
					.right
						width: 80px
						height: 25px
						box-sizing: border-box
						line-height: 25px
						font-size: 12px
						padding-left: 40px
						color: #83868c
				.glide
					width: 100%
					height: 135px
					display: flex
					flex-wrap: nowrap
					.glide-item
						flex-shrink: 0
						width: 150px
						height: 150px
						.img
							margin: 0 0px 20px 20px 
							width: 135px
							height: 125px
							border-radius: 20px	
			.slide-three
				width: 100%
				height: 90px
				.title
					width: 100%
					height: 45px
					display: flex
					justify-content: space-between
					align-items: center
					box-sizing: border-box
					padding: 0 20px
					.left
						width: 100px;
						height: 25px;
						display: flex;
						.stand
							width: 4px
							height: 22px
							background-color: #fff
							border-radius: 4px
							margin-right: 16rpx
						.text
							font-weight: 700
							color: #fff;
					.right
						width: 80px
						height: 25px
						box-sizing: border-box
						line-height: 25px
						font-size: 12px
						padding-left: 40px
						color: #83868c
				.glide
					width: 100%
					height: 35px
					display: flex
					flex-wrap: nowrap
					:nth-child(1)
						margin-left: 5px
					.glide-item
						width: auto
						height: 25px
						margin-right: 10px
						flex-shrink: 0
						color: #fff
						border-radius: 20px
						background: -webkit-linear-gradient(left,rgb(223,115,1),#f6a539);
						.word
							font-size: 12px
							line-height: 25px
							margin: 0 20px
			.Showcase
				width: 100%
				height: 100%
				margin:  0 10px
				.img
					width: 110px
					height: 230px
					border-radius: 20px
					margin:  0 5px		
</style>
